<template>
<div>
<div id="allmap"  :style="mapStyle"  class="allmap"></div>

<el-button  @click="addMark" >添加</el-button>
</div>
</template>

<script>
// import BMap from "BMap";
export default {
  name: "BaiduMap",
  data() {
    return {
         mapStyle:{
          width:'100%',
          height:this.mapHeight +'px'
        },
        map:{},
    };
  },
  props:{
      // 地图在该视图上的高度
      mapHeight:{
        type:Number,
        default:500
      },
      // 经度
      longitude:{
        type:Number,
        default:116.404
      },
      // 纬度
      latitude:{
        type:Number,
        default:39.915
      },
      description:{
        type:String,
        default:'天安门'
      }
    },
  created() {},
  methods:{
      addMark(){

          console.log("测试");
          var bounds = this.map.getBounds();    
            var lngSpan = bounds.maxX - bounds.minX;    
            var latSpan = bounds.maxY - bounds.minY;    
            for (var i = 0; i < 10; i ++) {    
                var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                                            bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
                this.addMarker(point, i);    
            }
      },

      addMarker(point,i){
            var marker = new BMap.Marker(point);
                marker.addEventListener("click", function(){    
                    alert("您点击了标注");    
                });  
             this.map.addOverlay(marker);  //添加标注
      }
  },
  mounted() {
    this.map = new BMap.Map("allmap"); // 创建地图实例
    var point = new BMap.Point(120.323388,31.590491); // 创建点坐标
    this.map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
    this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    this.map.addControl(new BMap.NavigationControl());
    this.map.addControl(new BMap.ScaleControl());
    this.map.addControl(new BMap.OverviewMapControl());
    this.map.addControl(new BMap.MapTypeControl());
    this.map.setCurrentCity("无锡"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
    // var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}
    // map.addControl(new BMap.NavigationControl(opts)); 自定义控件
    this.map.setMapStyle({ style: "light" }); //地图风格
  }
};
</script>


